<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>input 表单元素</title>
</head>

<body>
  <form action="">
    <!-- text 文本框 用户可以里面输入任何文字 -->
    用户名：<input type="text" name="username" value="请输入用户名" max="8"> <br>
    <!-- password 密码框 用户看不见输入的密码 -->
    密码：<input type="password" name="pwd" maxlength="6"> <br>
    <!-- radio 单选按钮 可以实现多选一 -->
    性别：男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女"> 一只猪
    <input type="radio" name="sex" value="一只猪">
    <br>
    <!-- checkbox 复选框 可以实现多选 -->
    爱好：吃饭 <input type="checkbox" value="吃饭" name="hobby" checked="checked"> 睡觉 <input type="checkbox" value="睡觉"
      name="hobby" checked="checked"> 打豆豆 <input type="checkbox" name="hobby" value="打豆豆"> <br>
    <!-- 点击了提交按钮，可以把 表单域form 里面的表单元素 里面的值 提交给后台服务器 -->
    <input type="submit" value="免费注册">
    <!-- 重置按钮可以还原表单元素初始的默认状态 -->
    <input type="reset" value="重新填写">
    <!-- 普通按钮 button 后期结合js 搭配使用 -->
    <input type="button" value="获取短信验证码"> <br>
    <!-- 文件域 使用场景 上传文件使用的 -->
    上传头像：<input type="file" name="" id="">
  </form>
</body>

</html>